<template>
  <div class="order">
    <van-tabs v-model="active" sticky color="#ff7340" @click="onHandClick">
      <van-tab title="全部订单"/>
      <van-tab title="待付款"/>
      <van-tab title="待发货"/>
      <van-tab title="待收货"/>
    </van-tabs>
    <tpl-list />
  </div>
</template>

<script>
import tplList from '../components/tplList'
export default {
  name: 'Index',
  components: {
    tplList
  },
  data() {
    return {
      active: undefined,
      orderListData: [],
      formData: {
        order_type: undefined,
        status: undefined,
        pay_status: undefined,
        limit: 5,
        p: 1
      }
    }
  },
  created() {
    this.whichRoute()
  },
  methods: {
    // 判断是什么路由
    whichRoute() {
      const routeData = this.$route.query
      if (routeData.type === 'order_type' || !routeData.type) {
        this.active = 0
        this.formData.order_type = undefined
        this.formData.status = undefined
        this.formData.pay_status = undefined
      } else if (routeData.type === 'pay_status') {
        this.active = 1
        this.formData.order_type = undefined
        this.formData.status = undefined
        this.formData.pay_status = 0
      } else if (routeData.type === 'status3') {
        this.active = 2
        this.formData.order_type = undefined
        this.formData.status = 3
        this.formData.pay_status = undefined
      } else if (routeData.type === 'status4') {
        this.active = 3
        this.formData.order_type = undefined
        this.formData.status = 4
        this.formData.pay_status = undefined
      }
    },
    // tab点击事件
    onHandClick(index, title) {
      const routeData = {}
      if (index === 0) {
        routeData.type = 'order_type'
        routeData.value = 0
      } else if (index === 1) {
        routeData.type = 'pay_status'
        routeData.value = 0
      } else if (index === 2) {
        routeData.type = 'status3'
        routeData.value = 3
      } else if (index === 3) {
        routeData.type = 'status4'
        routeData.value = 4
      }
      this.$router.push({
        query: {
          type: routeData.type,
          value: routeData.value
        }
      })
    }
  }
}
</script>

<style lang="scss">

</style>
